<div class="paypage">
    <div class="modal_close"><i>&times;</i></div>
    <div class="login_input">

        <ul>
            <li class="active" id="li1">扫码直接<div th:text="${readdown}=='readpay'?'阅读':'下载'" th:remove="tag"></div></li>
            <li id="li2">用户账号<div th:text="${readdown}=='readpay'?'阅读':'下载'" th:remove="tag"></div></li>
        </ul>
        <div class="line"></div>
        <div class="dipay_form">
            <span><div th:text="${readdown}=='readpay'?'阅读':'下载'" th:remove="tag"></div><div th:text="${type}=='doc'?'阅读':'下载'" th:remove="tag"></div>需要支付<i th:text="${pay*systradesets.glodrate}"> ¥ </i> 元</span>
            <div th:each="item :${paysetlist}" th:remove="tag">
                <div class="weipayma" th:if="${item.state}==1 and ${item.id}==1">
                    <img alt="二扫码支付" th:src="@{/scanCode2(total_fee=${pay},docid=${id},type=${type},readdown=${readdown})}" />
                    <span><i></i>微信扫码付款</span>
                </div>
                <div class="alipayma" th:if="${item.state}==1 and ${item.id}==2">
                    <img alt="二扫码支付" th:src="@{/scanCode2(total_fee=${pay},docid=${id},type=${type},readdown=${readdown})}" />
                    <span><i></i>支付宝扫码付款</span>
                </div>
            </div>
        </div>
        <div class="login_form" th:if="${user.groupid}">
            <span>您目前账号余额：<i th:text="|${systradesets.glodname}${user.glods}${systradesets.glodunit}|"></i> </span>
            <span>本次<div th:text="${readdown}=='readpay'?'阅读':'下载'" th:remove="tag"></div><div th:text="${type}=='doc'?'文档':'专题'" th:remove="tag"></div>需要支付 <i th:text="|${systradesets.glodname}${pay2}${systradesets.glodunit}|"> </i></span>
            <span class="btn pay">确定支付</span>
        </div>
        <div th:unless="${user.groupid}" class="login_form">

            <form id="login_email">
                <input class="inout1" type="text" name="username" placeholder="手机号码" autocomplete="off" disableautocomplete autofocus data-valid data-must="请输入帐号" /><span></span>
                <input class="inout2" type="password" name="password" placeholder="密码" data-valid data-must="请输入密码" data-length="1-50"/><span></span>
                <div class="auto-forget">
                    <div class="ui-checkbox"><i></i><span>自动登录</span><input type="hidden" id="rememberMe1" name="rememberMe1" value="0" /></div>
                    <!--<a href="forget.html" class="forget">忘记密码？</a>-->
                </div>
                <span class="login_error"></span>
                <div class="btn btn_login">登录</div>
                <a href="javascript:;" class="register-a">立即注册</a>
            </form>
            <p>用其他方式登录</p>
            <div th:each="item :${loginsetlist}" th:remove="tag">
                <li th:if="${item.id==5} and ${item.state==1}"><a href="javascript:;" id="gzhlogin" ><img th:src="@{/img/wx.png}" alt="微信"></a></li>
                <li th:if="${item.id==6} and ${item.state==1}"><a href="/alilogin/alipay"  rel="nofollow"><img th:src="@{/img/ali.png}"></a></li>
            </div>
        </div>
        <div th:unless="${user.groupid}" class="register_form">

            <form id="register_phone">
                <input class="inout1" type="text" name="username" placeholder="手机号码" autocomplete="off" disableautocomplete data-valid data-must="请填写手机号码" data-reg="^1\d{10}$" data-reg-msg="请填写正确的手机号码" data-sever="c/user_valid/0" data-sever-msg="该手机号码已被注册，请直接登录"/><span></span>
                <input class="inout2" type="password" id="ppassword" name="password" placeholder="密码" data-valid data-must="请填写密码" data-length="10-50" data-length-msg="密码最低10位"  data-reg="\d+" data-reg-msg="密码必须包含数字"  data-reg-msg1="密码必须包含小写字母"  data-reg2="[A-Z]+" data-reg-msg2="密码必须包含大写字母"><span></span>
                <input class="inout3" type="password" name="password2" placeholder="确认密码" data-valid data-must="请再次输入密码" data-equ="#ppassword"><span></span>

                <input class="inout4" type="text" name="finvicode" placeholder="邀请码必填" autocomplete="off" disableautocomplete data-valid data-must="请填写邀请码" data-sever="c/invicode_valid" data-sever-msg="该邀请码不存在"/><span></span>

                <input class="inout5" type="text" name="yzm" placeholder="验证码" autocomplete="off" disableautocomplete data-valid data-must="请填写验证码" data-sever="c/yyzm" data-sever-msg="验证码不正确"><span></span>
                <i class="yzm unselect" data-server="c/sendcode/phone" data-msg="请先输入正确的手机号码">获取验证码</i>
                <div class="agree">
                    <div class="ui-checkbox"><i></i><span></span><input type="hidden" name="agree" value="0" /></div>
                    <span>同意</span>
                </div>
                <span class="register_error"></span>
                <div class="btn btn_register">注册</div>
            </form>


            <a href="javascript:;" class="login-a">立即登录</a>


        </div>

    </div>

</div>
<script th:inline="javascript"> var ctx = [[@{/}]];</script>
<script>
    $(function() {
        $(".login_input #li1").click(function() {
            $(".login_input li").removeClass("active");
            $(this).addClass("active");
            $(".line").css("left", "16%");
            $(".dipay_form").css("display", "block");
            $(".login_form").css("display", "none");
            $(".register_form").css("display", "none");
        });
        $(".login_input #li2").click(function() {
            $(".login_input li").removeClass("active");
            $(this).addClass("active");
            $(".line").css("left", "67%");
            $(".dipay_form").css("display", "none");
            $(".login_form").css("display", "block");
            $(".register_form").css("display", "none");
        });

        $(".register-a").click(function() {
            $(".dipay_form").css("display", "none");
            $(".login_form").css("display", "none");
            $(".register_form").css("display", "block");
        });

        $(".login-a").click(function() {
            $(".dipay_form").css("display", "none");
            $(".login_form").css("display", "block");
            $(".register_form").css("display", "none");
        });

        $(".change_ewm").click(function() {
            $(".login_input").css("display", "none");
            $(".login_erweima").css("display", "block");
        });
        $(".change_ewm2").click(function() {
            $(".login_input").css("display", "block");
            $(".login_erweima").css("display", "none");
        });

        var register_email = false;
        $(".change_register").click(function() {
            register_email = !register_email;
            $(".register_error").text('');
            if (register_email) {
                $("#register_email").show();
                $("#register_phone").hide();
                $(".change_register i").text("手机");
            } else {
                $("#register_email").hide();
                $("#register_phone").show();
                $(".change_register i").text("邮箱");
            }
        });

        $(".yzm").click(function(e) {
            e.preventDefault();
            var $this = $(this);
            if ($this.hasClass("disable") || $this.hasClass("doing"))
                return;
            $this.addClass("doing");

            $(".register_error").text('');

            var $username = $this.parent().find(".inout1");
            var username = $username.val();
            var data_msg = $(this).attr("data-msg");
            var data_server = $(this).attr("data-server");

            if (username && $username.hasClass("ok")) {
                $this.text("发送中...");
                $.post(data_server, { username: username }, function(data) {
                    //$this.text("已发送");
                });

                var t = 60;
                var seti = setInterval(function() {
                    t--;
                    if (t > 0) {
                        $this.text("重新发送(" + t + ")");
                    } else {
                        $this.text("重新发送");
                        $this.removeClass("doing");
                        clearInterval(seti);
                    }
                }, 1000);

            } else {
                $(".register_error").text(data_msg);
                $this.removeClass("doing");
            }
        });

        $(".agree span").click(function() {
            $.get('login/protocol', function(data) {
                var w_height = $(window).height(),
                    w_width = $(window).width();
                //Message('<textarea name="content" class="ui-text" style="height:' + w_height / 2 + 'px; width: ' + w_width / 2 + 'px;">' + data + '</textarea>', '【<?php echo $protitle ?>】');
            });
        });

        $(".btn_login").click(function() {
            $(".login_error").text('');
            $form = $(this).parent();
            $form.find("input[data-valid]").trigger("change");
            if ($form.find(".error").length !== 0)
                return;
            $.ajax({
                url: ctx + "login",
                type: "post",
                data: $form.serialize(),
                success: function(data) {
                    if (data.code == 0) {
                        if(typeof login_ok === 'function') {
                            login_ok();
                        } else {
                            location.href = location.href;
                        }
                        HideModal();
                    } else {
                        $(".login_error").text(data);
                    }
                }
            });
        });

        $(".btn_register").click(function() {
            $(".register_error").text('');
            $form = $(this).parent();
            $form.find("input[data-valid]").trigger("change");
            if ($form.find(".error").length !== 0)
                return;
            if ($form.find(".ui-checkbox input").val() == 0) {
                $(".register_error").text("您需要同意用户协议，才能注册");
                return;
            }
            $.ajax({
                url: "/register",
                type: "post",
                data: $form.serialize(),
                success: function(data) {
                    if (data == 1) {
                        if(typeof login_ok === 'function') {
                            login_ok();
                        } else {
                            location.href = location.href;
                        }
                        HideModal();
                    } else {
                        $(".register_error").text(data);
                    }
                }
            });
        });

        $(document).on("keydown", function(e) {
            if (e.keyCode == 13) {
                $(".btn_login").click();
            }
        });
    });
</script>
<script>
    $(".modal_close i").click(function() {
        window.clearInterval(paysetint);
        HideModal();
    });

    var paysetint = setInterval(function() {
        $.get("/[(${type})]paystate.htm?docid=[(${id})]&type=[(${type})]&readdown=[(${readdown})]", function(data) {
            if (data) {
                window.clearInterval(paysetint);
                HideModal();
                location.href=location.href + '#[(${readdown})]'
                if('[(${readdown})]' == 'readpay') {
                    payread();
                } else {
                    paydown();
                }
            }
        });
    },3000);

    $(".btn.pay").click(function(){
        HideModal();
        location.href=location.href + '?#[(${readdown})]'
        if('[(${readdown})]' == 'readpay') {
            payread();
        } else {
            paydown();
        }
    });

    //perper
    var i = 100;
    var set = setInterval(function() {
        if (i > 0) {
            $("span.per ii").text(i--);
        } else {
            window.clearInterval(set);
            $(".weipayma .olded,.alipayma .olded").show();
            $(".weipayma span.per,.alipayma span.per").html('<i></i>已过期，重新刷新页面');
        }
    }, 1000);
</script>

